<!DOCTYPE html>
<html lang=zh>
<head>
  <meta charset="utf-8">
  
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
  <meta name="renderer" content="webkit">
  <meta http-equiv="Cache-Control" content="no-transform" />
  <meta http-equiv="Cache-Control" content="no-siteapp" />
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="format-detection" content="telephone=no,email=no,adress=no">
  <!-- Color theme for statusbar -->
  <meta name="theme-color" content="#000000" />
  <!-- 强制页面在当前窗口以独立页面显示,防止别人在框架里调用页面 -->
  <meta http-equiv="window-target" content="_top" />
  
  <meta name="google-site-verification" content="EsvUwzVMQTFU8fJLM8qzjSX2Lzh4msii_Tj8W4EjcSk" />
  
  
  <title>用Hexo配合GitHub快速上线自己的个人博客 | Legrandk&#39;s Qzone</title>
  <meta name="description" content="不想买服务器却又想创造属于自己的网站？Hexo可以帮你。  啥是HexoHexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。 本教程可以让你快速上线属于你自己的博客。 事前准备你需要安装两个东西：Git和Node.js Git的安装教程在这儿。 Node.js可以直接在这儿下载，不要忘记把它加到环境变量">
<meta property="og:type" content="article">
<meta property="og:title" content="用Hexo配合GitHub快速上线自己的个人博客">
<meta property="og:url" content="https://www.legr4ndk.top/2020/10/18/HexoCourse/index.html">
<meta property="og:site_name" content="Legrandk&#39;s Qzone">
<meta property="og:description" content="不想买服务器却又想创造属于自己的网站？Hexo可以帮你。  啥是HexoHexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。 本教程可以让你快速上线属于你自己的博客。 事前准备你需要安装两个东西：Git和Node.js Git的安装教程在这儿。 Node.js可以直接在这儿下载，不要忘记把它加到环境变量">
<meta property="og:locale" content="zh_CN">
<meta property="article:published_time" content="2020-10-18T09:05:41.000Z">
<meta property="article:modified_time" content="2021-03-14T10:17:28.594Z">
<meta property="article:author" content="Legrandk">
<meta property="article:tag" content="hexo">
<meta name="twitter:card" content="summary">
  <!-- Canonical links -->
  <link rel="canonical" href="https://www.legr4ndk.top/2020/10/18/HexoCourse/index.html">
  
    <link rel="alternate" href="/atom.xml" title="Legrandk&#39;s Qzone" type="application/atom+xml">
  
  
    <link rel="icon" href="/favicon.png" type="image/x-icon">
  
  
<link rel="stylesheet" href="/css/style.css">

  
  
  
    <link href="//cdn.jsdelivr.net/npm/@fancyapps/fancybox@3.3.5/dist/jquery.fancybox.min.css" rel="stylesheet">
  
  
<meta name="generator" content="Hexo 5.2.0">
<style>.github-emoji { position: relative; display: inline-block; width: 1.2em; min-height: 1.2em; overflow: hidden; vertical-align: top; color: transparent; }  .github-emoji > span { position: relative; z-index: 10; }  .github-emoji img, .github-emoji .fancybox { margin: 0 !important; padding: 0 !important; border: none !important; outline: none !important; text-decoration: none !important; user-select: none !important; cursor: auto !important; }  .github-emoji img { height: 1.2em !important; width: 1.2em !important; position: absolute !important; left: 50% !important; top: 50% !important; transform: translate(-50%, -50%) !important; user-select: none !important; cursor: auto !important; } .github-emoji-fallback { color: inherit; } .github-emoji-fallback img { opacity: 0 !important; }</style>
</head>


<body class="main-center theme-black" itemscope itemtype="http://schema.org/WebPage">
  <header class="header" itemscope itemtype="http://schema.org/WPHeader">
  <div class="slimContent">
    <div class="navbar-header">
      
      
      <div class="profile-block text-center">
        <a id="avatar" href="https://github.com/legr4ndk" target="_blank">
          <img class="img-circle img-rotate" src="/images/avatar.jpg" width="200" height="200">
        </a>
        <h2 id="name" class="hidden-xs hidden-sm">Legrandk</h2>
        <h3 id="title" class="hidden-xs hidden-sm hidden-md">A Game Idiot</h3>
        <small id="location" class="text-muted hidden-xs hidden-sm"><i class="icon icon-map-marker"></i> Hangzhou, China</small>
      </div>
      
      <div class="search" id="search-form-wrap">

    <form class="search-form sidebar-form">
        <div class="input-group">
            <input type="text" class="search-form-input form-control" placeholder="搜索" />
            <span class="input-group-btn">
                <button type="submit" class="search-form-submit btn btn-flat" onclick="return false;"><i class="icon icon-search"></i></button>
            </span>
        </div>
    </form>
    <div class="ins-search">
  <div class="ins-search-mask"></div>
  <div class="ins-search-container">
    <div class="ins-input-wrapper">
      <input type="text" class="ins-search-input" placeholder="想要查找什么..." x-webkit-speech />
      <button type="button" class="close ins-close ins-selectable" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
    </div>
    <div class="ins-section-wrapper">
      <div class="ins-section-container"></div>
    </div>
  </div>
</div>


</div>
      <button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target="#main-navbar" aria-controls="main-navbar" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>
    <nav id="main-navbar" class="collapse navbar-collapse" itemscope itemtype="http://schema.org/SiteNavigationElement" role="navigation">
      <ul class="nav navbar-nav main-nav menu-highlight">
        
        
        <li class="menu-item menu-item-home">
          <a href="/.">
            
            <i class="icon icon-home-fill"></i>
            
            <span class="menu-title">首页</span>
          </a>
        </li>
        
        
        <li class="menu-item menu-item-archives">
          <a href="/archives">
            
            <i class="icon icon-archives-fill"></i>
            
            <span class="menu-title">归档</span>
          </a>
        </li>
        
        
        <li class="menu-item menu-item-categories">
          <a href="/categories">
            
            <i class="icon icon-folder"></i>
            
            <span class="menu-title">分类</span>
          </a>
        </li>
        
        
        <li class="menu-item menu-item-tags">
          <a href="/tags">
            
            <i class="icon icon-tags"></i>
            
            <span class="menu-title">标签</span>
          </a>
        </li>
        
        
        <li class="menu-item menu-item-links">
          <a href="/links">
            
            <i class="icon icon-friendship"></i>
            
            <span class="menu-title">友链</span>
          </a>
        </li>
        
        
        <li class="menu-item menu-item-about">
          <a href="/about">
            
            <i class="icon icon-cup-fill"></i>
            
            <span class="menu-title">关于</span>
          </a>
        </li>
        
      </ul>
      
	
    <ul class="social-links">
    	
        <li><a href="https://github.com/legr4ndk" target="_blank" title="Github" data-toggle=tooltip data-placement=top><i class="icon icon-github"></i></a></li>
        
        <li><a href="https://weibo.com/7526194755/profile" target="_blank" title="Weibo" data-toggle=tooltip data-placement=top><i class="icon icon-weibo"></i></a></li>
        
        <li><a href="https://twitter.com/legr4ndk" target="_blank" title="Twitter" data-toggle=tooltip data-placement=top><i class="icon icon-twitter"></i></a></li>
        
        <li><a href="https://legr4ndk.github.io/atom.xml" target="_blank" title="Rss" data-toggle=tooltip data-placement=top><i class="icon icon-rss"></i></a></li>
        
    </ul>

    </nav>
  </div>
</header>

  
    <aside class="sidebar" itemscope itemtype="http://schema.org/WPSideBar">
  <div class="slimContent">
    
      <div class="widget">
    <h3 class="widget-title">一言</h3>
    <div class="widget-body">
        <div id="board">
            <div class="content">
                <p id="hitokoto">获取中...</p><script src="https://v1.hitokoto.cn/?encode=js&select=%23hitokoto" defer></script>
            </div>
        </div>
    </div>
</div>

    
      
  <div class="widget">
    <h3 class="widget-title">分类</h3>
    <div class="widget-body">
      <ul class="category-list"><li class="category-list-item"><a class="category-list-link" href="/categories/%E4%B8%AA%E4%BA%BA%E6%84%9F%E6%82%9F/">个人感悟</a><span class="category-list-count">7</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E5%89%8D%E7%AB%AF/">前端</a><span class="category-list-count">2</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E5%90%8E%E7%AB%AF/">后端</a><span class="category-list-count">8</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E5%AD%A6%E4%B9%A0/">学习</a><span class="category-list-count">4</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E5%AE%89%E5%85%A8/">安全</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E5%AE%A2%E6%88%B7%E7%AB%AF/">客户端</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E5%B7%A5%E5%85%B7/">工具</a><span class="category-list-count">3</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E7%AE%97%E6%B3%95/">算法</a><span class="category-list-count">2</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E8%80%8D/">耍</a><span class="category-list-count">2</span></li></ul>
    </div>
  </div>


    
      
  <div class="widget">
    <h3 class="widget-title">标签云</h3>
    <div class="widget-body tagcloud">
      <a href="/tags/algorithm/" style="font-size: 13.33px;">algorithm</a> <a href="/tags/bootstrap/" style="font-size: 13px;">bootstrap</a> <a href="/tags/cpp/" style="font-size: 13px;">cpp</a> <a href="/tags/csharp/" style="font-size: 13px;">csharp</a> <a href="/tags/ctf/" style="font-size: 13px;">ctf</a> <a href="/tags/git/" style="font-size: 13px;">git</a> <a href="/tags/hexo/" style="font-size: 13px;">hexo</a> <a href="/tags/java/" style="font-size: 13.67px;">java</a> <a href="/tags/javascript/" style="font-size: 13px;">javascript</a> <a href="/tags/markdown/" style="font-size: 13px;">markdown</a> <a href="/tags/misc/" style="font-size: 14px;">misc</a> <a href="/tags/net/" style="font-size: 13px;">net</a> <a href="/tags/os/" style="font-size: 13px;">os</a> <a href="/tags/server/" style="font-size: 13.33px;">server</a> <a href="/tags/sql/" style="font-size: 13px;">sql</a> <a href="/tags/study/" style="font-size: 13.33px;">study</a>
    </div>
  </div>

    
      
  <div class="widget">
    <h3 class="widget-title">归档</h3>
    <div class="widget-body">
      <ul class="archive-list"><li class="archive-list-item"><a class="archive-list-link" href="/archives/2021/10/">十月 2021</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2021/09/">九月 2021</a><span class="archive-list-count">2</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2021/07/">七月 2021</a><span class="archive-list-count">4</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2021/05/">五月 2021</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2021/03/">三月 2021</a><span class="archive-list-count">3</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2021/02/">二月 2021</a><span class="archive-list-count">2</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2021/01/">一月 2021</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2020/12/">十二月 2020</a><span class="archive-list-count">6</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2020/11/">十一月 2020</a><span class="archive-list-count">3</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2020/10/">十月 2020</a><span class="archive-list-count">7</span></li></ul>
    </div>
  </div>


    
      
  <div class="widget">
    <h3 class="widget-title">最新文章</h3>
    <div class="widget-body">
      <ul class="recent-post-list list-unstyled no-thumbnail">
        
          <li>
            
            <div class="item-inner">
              <p class="item-category">
                <a class="category-link" href="/categories/%E4%B8%AA%E4%BA%BA%E6%84%9F%E6%82%9F/">个人感悟</a>
              </p>
              <p class="item-title">
                <a href="/2021/10/05/memorySteve/" class="title">纪念史蒂夫·乔布斯逝世10周年</a>
              </p>
              <p class="item-date">
                <time datetime="2021-10-05T04:37:27.000Z" itemprop="datePublished">2021-10-05</time>
              </p>
            </div>
          </li>
          
          <li>
            
            <div class="item-inner">
              <p class="item-category">
                <a class="category-link" href="/categories/%E5%AD%A6%E4%B9%A0/">学习</a>
              </p>
              <p class="item-title">
                <a href="/2021/09/29/os-interrupt/" class="title">操作系统笔记1-中断</a>
              </p>
              <p class="item-date">
                <time datetime="2021-09-29T10:12:35.000Z" itemprop="datePublished">2021-09-29</time>
              </p>
            </div>
          </li>
          
          <li>
            
            <div class="item-inner">
              <p class="item-category">
                <a class="category-link" href="/categories/%E5%AD%A6%E4%B9%A0/">学习</a>
              </p>
              <p class="item-title">
                <a href="/2021/09/28/net-intro/" class="title">计算机网络笔记-1</a>
              </p>
              <p class="item-date">
                <time datetime="2021-09-28T11:51:37.000Z" itemprop="datePublished">2021-09-28</time>
              </p>
            </div>
          </li>
          
          <li>
            
            <div class="item-inner">
              <p class="item-category">
                <a class="category-link" href="/categories/%E4%B8%AA%E4%BA%BA%E6%84%9F%E6%82%9F/">个人感悟</a>
              </p>
              <p class="item-title">
                <a href="/2021/07/30/20thAnniversaryRecord/" class="title">奔三异闻录</a>
              </p>
              <p class="item-date">
                <time datetime="2021-07-29T16:19:37.000Z" itemprop="datePublished">2021-07-30</time>
              </p>
            </div>
          </li>
          
          <li>
            
            <div class="item-inner">
              <p class="item-category">
                <a class="category-link" href="/categories/%E5%AD%A6%E4%B9%A0/">学习</a>
              </p>
              <p class="item-title">
                <a href="/2021/07/04/ComputerArch/" class="title">计算机组成原理实验报告</a>
              </p>
              <p class="item-date">
                <time datetime="2021-07-04T03:58:07.000Z" itemprop="datePublished">2021-07-04</time>
              </p>
            </div>
          </li>
          
      </ul>
    </div>
  </div>
  

    
  </div>
</aside>

  
  
<main class="main" role="main">
  <div class="content">
  <article id="post-HexoCourse" class="article article-type-post" itemscope itemtype="http://schema.org/BlogPosting">
    
    <div class="article-header">
      
        
  
    <h1 class="article-title" itemprop="name">
      用Hexo配合GitHub快速上线自己的个人博客
    </h1>
  

      
      <div class="article-meta">
        <span class="article-date">
    <i class="icon icon-calendar-check"></i>
	<a href="/2020/10/18/HexoCourse/" class="article-date">
	  <time datetime="2020-10-18T09:05:41.000Z" itemprop="datePublished">2020-10-18</time>
	</a>
</span>
        
  <span class="article-category">
    <i class="icon icon-folder"></i>
    <a class="article-category-link" href="/categories/%E5%B7%A5%E5%85%B7/">工具</a>
  </span>

        
  <span class="article-tag">
    <i class="icon icon-tags"></i>
	<a class="article-tag-link-link" href="/tags/hexo/" rel="tag">hexo</a>
  </span>


        
	<span class="article-read hidden-xs">
	    <i class="icon icon-eye-fill" aria-hidden="true"></i>
	    <span id="busuanzi_container_page_pv">
			<span id="busuanzi_value_page_pv">0</span>
		</span>
	</span>


        <span class="post-comment"><i class="icon icon-comment"></i> <a href="/2020/10/18/HexoCourse/#comments" class="article-comment-link">评论</a></span>
        
	
		<span class="post-wordcount hidden-xs" itemprop="wordCount">字数统计: 1.5k(字)</span>
	
	
		<span class="post-readcount hidden-xs" itemprop="timeRequired">阅读时长: 5(分)</span>
	

      </div>
    </div>
    <div class="article-entry marked-body" itemprop="articleBody">
      
        <blockquote>
<p>不想买服务器却又想创造属于自己的网站？Hexo可以帮你。</p>
</blockquote>
<h2 id="啥是Hexo"><a href="#啥是Hexo" class="headerlink" title="啥是Hexo"></a>啥是Hexo</h2><p><strong>Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。</strong></p>
<p>本教程可以让你快速上线属于你自己的博客。</p>
<h2 id="事前准备"><a href="#事前准备" class="headerlink" title="事前准备"></a>事前准备</h2><p>你需要安装两个东西：Git和Node.js</p>
<p>Git的安装教程<a target="_blank" rel="noopener" href="https://legr4ndk.github.io/2020/10/16/GitPushBriefIntroduction/#Install-git-may-need-root-permission">在这儿</a>。</p>
<p>Node.js可以直接<a target="_blank" rel="noopener" href="https://nodejs.org/zh-cn/">在这儿</a>下载，不要忘记把它加到环境变量中去。</p>
<p>安装完之后可以在命令行中输入</p>
<figure class="highlight shell"><table><tbody><tr><td class="code"><pre><code class="hljs shell">➜ git --version #输入这个，下面是显示的内容<br>git version 2.28.0.windows.1<br></code></pre></td></tr></tbody></table></figure>

<figure class="highlight shell"><table><tbody><tr><td class="code"><pre><code class="hljs shell">➜ npm --version #输入这个，下面是显示的内容<br>6.14.8<br></code></pre></td></tr></tbody></table></figure>

<p>如果均有回显版本号（可能你的版本和我的不一样），那么就说明安装成功了。</p>
<p>接下来因为要用到npm这个包管理器，所以先给npm的镜像站点换成国内的淘宝源，命令如下：</p>
<figure class="highlight shell"><table><tbody><tr><td class="code"><pre><code class="hljs shell">➜ npm config set registry https://registry.npm.taobao.org<br></code></pre></td></tr></tbody></table></figure>

<p>然后准备工作就全部完成了。</p>
<h2 id="安装Hexo"><a href="#安装Hexo" class="headerlink" title="安装Hexo"></a>安装Hexo</h2><p>需要以下几个命名，按顺序执行就行了：</p>
<figure class="highlight shell"><table><tbody><tr><td class="code"><pre><code class="hljs shell">➜ npm install hexo -g #安装hexo<br>➜ npm install hexo-deployer-git --save #安装hexo的一个插件包，用于Git部署<br></code></pre></td></tr></tbody></table></figure>

<p>安装完之后，你需要建立一个文件夹专门用来存放你的博客的文件，然后打开那个文件夹，在该文件夹里打开命令行窗口（Windows用户可以选择通过按住Shift并在文件夹窗口空白地区右键来打开PowerShell），现在需要初始化你的网站，命令行输入：</p>
<figure class="highlight shell"><table><tbody><tr><td class="code"><pre><code class="hljs shell">➜ hexo init #初始化hexo站点，init=initialize<br></code></pre></td></tr></tbody></table></figure>

<p>此命令会从远程仓库克隆基础的Hexo站点模板，视你的网络条件（你懂）此过程可能持续数分钟，然后你的文件夹里会多很多文件，主文件夹结构大致如下：</p>
<figure class="highlight shell"><table><tbody><tr><td class="code"><pre><code class="hljs shell">├─node_modules #太大了不展开了<br>├─scaffolds<br>├─source #要展示在网页上的资源文件<br>│  └─_posts #存放博客内的博文和媒体文件，博文以markdown存储<br>└─themes #存放主题文件，自带一个landscape主题，此处以它为例，如果要用其他主题也请放入这边<br>    └─landscape #主题存放文件夹，此处有主题的配置文件_config.yml<br>        ├─languages<br>        ├─layout<br>        │  ├─_partial<br>        │  │  └─post<br>        │  └─_widget<br>        ├─scripts<br>        └─source<br>            ├─css<br>            │  ├─fonts<br>            │  ├─images<br>            │  ├─_partial<br>            │  └─_util<br>            ├─fancybox<br>            │  └─helpers<br>            └─js<br></code></pre></td></tr></tbody></table></figure>

<p>然后，你可以在命令行执行以下语句来清理已有网站内容</p>
<figure class="highlight shell"><table><tbody><tr><td class="code"><pre><code class="hljs shell">➜ hexo clean<br></code></pre></td></tr></tbody></table></figure>

<h2 id="正式使用Hexo"><a href="#正式使用Hexo" class="headerlink" title="正式使用Hexo"></a>正式使用Hexo</h2><p>先介绍几个Hexo使用的基本命令：</p>
<figure class="highlight shell"><table><tbody><tr><td class="code"><pre><code class="hljs shell">➜ hexo generate #或者 hexo g，用来跟据你写好的md博文生成新的网页文件并链接<br>➜ hexo server #或者hexo s,用于在本地的4000端口（127.0.0.1:4000）实时预览你的网页<br>➜ hexo new 'xxx' #新建博文，会在主文件夹/source/_posts文件夹下创建xxx.md与同名媒体文件夹<br></code></pre></td></tr></tbody></table></figure>

<p>编辑博文请在md文件内，博文的资源文件（如图片）请放到同名文件夹中并在md文件中使用相对地址链接来完成（比如./xxx/233.jpg)。</p>
<p><strong>——————那么做到这步我就假定你已经在刚刚生成的.md文件中写完文章了——————</strong></p>
<h2 id="部署Hexo博客到GitHub"><a href="#部署Hexo博客到GitHub" class="headerlink" title="部署Hexo博客到GitHub"></a>部署Hexo博客到GitHub</h2><p>毫无疑问你得先注册个GitHub，如果还没有的话，<a target="_blank" rel="noopener" href="https://github.com/">点这里去注册</a>。</p>
<p>然后新建一个仓库，注意这个仓库必须是开源的，而且名字有一定要求：<strong>必须是 用户名.github.io</strong></p>
<p>例如我的GitHub的id是legr4ndk，那么我的仓库名就是legr4ndk.github.io。</p>
<p>新建仓库之后，你可以在仓库里找到你仓库的链接，就像这样：</p>
<figure class="highlight awk"><table><tbody><tr><td class="code"><pre><code class="hljs awk">https:<span class="hljs-regexp">//gi</span>thub.com<span class="hljs-regexp">/YourGithubID/</span>YourRepoName.git<br></code></pre></td></tr></tbody></table></figure>

<p>然后打开你的本地Hexo文件夹，有个_config.yml文件（注意不是主题文件夹里的那个），使用你的代码编辑器打开它，划到最下面有个deploy标签，你需要编辑一下：</p>
<figure class="highlight plain"><table><tbody><tr><td class="code"><pre><code class="hljs _config.yml">#原来是这样的<br>deploy:<br>  type: ''<br>  <br>#你需要把它改成<br>deploy:<br>  type: 'git'<br>  repository: https://github.com/YourGithubID/YourRepoName.git #这边写的是你的仓库链接，我这个只是范例<br> <br> #注意冒号之后有空格<br></code></pre></td></tr></tbody></table></figure>

<p>第16行还有个标签叫url，你需要把后面的值改成你的仓库名称，比如这样：</p>
<figure class="highlight plain"><table><tbody><tr><td class="code"><pre><code class="hljs _config.yml">url: http://YourGithubID.github.io<br></code></pre></td></tr></tbody></table></figure>

<p>然后保存即可。</p>
<p>在部署前你必须使用<strong>hexo g</strong>重新生成网页文件。你可以运行<strong>hexo s</strong>命令先在本地检查你的网站还有没有问题。</p>
<p>部署使用一个命令：</p>
<figure class="highlight shell"><table><tbody><tr><td class="code"><pre><code class="hljs shell">➜ hexo deploy #或者hexo d，把本地生成的文件部署到GitHub上<br></code></pre></td></tr></tbody></table></figure>

<p>如果你是第一次在命令行上面使用GitHub，那么将会有一个弹窗要求你登录你的GitHub，之后，你的网站将会被推送到GitHub上。过几分钟你就可以通过你的仓库名作为URL访问你的网站了。比如我的网站的地址就是<a target="_blank" rel="noopener" href="https://legr4ndk.github.io/">legr4ndk.github.io</a>。</p>
<h3 id="注意事项"><a href="#注意事项" class="headerlink" title="注意事项"></a>注意事项</h3><ol>
<li>GitHub因为国内特殊环境可能出现无法访问，这个需要魔法上网。</li>
<li>每次deploy之后都需要几分钟后才能刷新观察到变化，切勿心急</li>
<li>每次写完新文章或者更换主题什么的之后，必须使用<em>hexo g</em>重新生成文件之后再部署</li>
<li>主题可以去<a target="_blank" rel="noopener" href="https://hexo.io/themes/">这里</a>寻找自己喜欢的，点击主题名字可以直接跳转主题的GitHub页面，跟据上面的教程安装即可。更改主题请去本地Hexo主文件夹的_config.yml内的theme标签更改。</li>
<li>主题内可能有部分依赖，建议换主题后在主题文件夹的命令行内运行<strong>npm install</strong>一键安装依赖（有的主题可能不行，建议查看主题的项目下的安装教程）。</li>
</ol>
<p>到此为止你已经可以上线一个基础的个人网站了，接下来就是跟据主题的README.md文件介绍的那样去自己订制网页了。</p>
<p>Have fun~</p>

      
    </div>
    <div class="article-footer">
      <blockquote class="mt-2x">
  <ul class="post-copyright list-unstyled">
    
    <li class="post-copyright-link hidden-xs">
      <strong>本文链接：</strong>
      <a href="https://www.legr4ndk.top/2020/10/18/HexoCourse/" title="用Hexo配合GitHub快速上线自己的个人博客" target="_blank" rel="external">https://www.legr4ndk.top/2020/10/18/HexoCourse/</a>
    </li>
    
    <li class="post-copyright-license">
      <strong>版权声明： </strong> 本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh" target="_blank" rel="external">CC BY-NC-SA 4.0协议</a> 与 <a href="https://github.com/996icu/996.ICU/blob/master/LICENSE" target="_blank" rel="external">"Anti 996" License</a> 两者合并的<a href="http://www.legr4ndk.top/LICENSE.html" target="_blank" rel="external">许可协议</a>。转载请注明出处。
    </li>
  </ul>
</blockquote>


<div class="panel panel-default panel-badger">
  <div class="panel-body">
    <figure class="media">
      <div class="media-left">
        <a href="https://github.com/legr4ndk" target="_blank" class="img-burn thumb-sm visible-lg">
          <img src="/images/avatar.jpg" class="img-rounded w-full" alt="">
        </a>
      </div>
      <div class="media-body">
        <h3 class="media-heading"><a href="https://github.com/legr4ndk" target="_blank"><span class="text-dark">Legrandk</span><small class="ml-1x">A Game Idiot</small></a></h3>
        <div>「愛を懐いて、理想を叫んだ。」</div>
      </div>
    </figure>
  </div>
</div>


    </div>
  </article>
  
    
  <section id="comments">
  	
  </section>


  
</div>

  <nav class="bar bar-footer clearfix" data-stick-bottom>
  <div class="bar-inner">
  
  <ul class="pager pull-left">
    
    <li class="prev">
      <a href="/2020/10/18/MarkdownCourse/" title="Markdown语法教程"><i class="icon icon-angle-left" aria-hidden="true"></i><span>&nbsp;&nbsp;上一篇</span></a>
    </li>
    
    
    <li class="next">
      <a href="/2020/10/17/TheCLanguageIsSoNB/" title="C语言数字、指针、布尔值灵活利用的典范"><span>下一篇&nbsp;&nbsp;</span><i class="icon icon-angle-right" aria-hidden="true"></i></a>
    </li>
    
    
  </ul>
  
  
  <!-- Button trigger modal -->
  <button type="button" class="btn btn-fancy btn-donate pop-onhover bg-gradient-warning" data-toggle="modal" data-target="#donateModal"><span>￥</span></button>
  <!-- <div class="wave-icon wave-icon-danger btn-donate" data-toggle="modal" data-target="#donateModal">
    <div class="wave-circle"><span class="icon"><i class="icon icon-bill"></i></span></div>
  </div> -->
  
  
  <div class="bar-right">
    
    <div class="share-component" data-sites="weibo,qq,wechat,facebook,twitter" data-mobile-sites="weibo,qq,qzone,wechat"></div>
    
  </div>
  </div>
</nav>
  
<!-- Modal -->
<div class="modal modal-center modal-small modal-xs-full fade" id="donateModal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content donate">
      <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
      <div class="modal-body">
        <div class="donate-box">
          <div class="donate-head">
            <p>感谢您对我的支持，我会继续努力的!！</p>
          </div>
          <div class="tab-content">
            <div role="tabpanel" class="tab-pane fade active in" id="alipay">
              <div class="donate-payimg">
                <img src="/images/donate/alipayimg.png" alt="打钱！" title="打钱！" />
              </div>
              <p class="text-muted mv">请我喝杯奶茶~</p>
              <p class="text-grey">打开支付宝扫一扫，即可进行扫码打赏哦</p>
            </div>
            <div role="tabpanel" class="tab-pane fade" id="wechatpay">
              <div class="donate-payimg">
                <img src="/images/donate/wechatpayimg.png" alt="打钱！" title="打钱！" />
              </div>
              <p class="text-muted mv">请我喝杯奶茶~</p>
              <p class="text-grey">打开微信扫一扫，即可进行扫码打赏哦</p>
            </div>
          </div>
          <div class="donate-footer">
            <ul class="nav nav-tabs nav-justified" role="tablist">
              <li role="presentation" class="active">
                <a href="#alipay" id="alipay-tab" role="tab" data-toggle="tab" aria-controls="alipay" aria-expanded="true"><i class="icon icon-alipay"></i> 支付宝</a>
              </li>
              <li role="presentation" class="">
                <a href="#wechatpay" role="tab" id="wechatpay-tab" data-toggle="tab" aria-controls="wechatpay" aria-expanded="false"><i class="icon icon-wepay"></i> 微信支付</a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>



</main>

  <footer class="footer" itemscope itemtype="http://schema.org/WPFooter">
    <div class="today" style="position:fixed;bottom:0;right:0;z-index:2">
        <div class="design"
            style="float:left;width:auto;border:1px solid #000;border-radius:20px 20px 20px 20px;height:auto;font-size:100%;padding: 8px 7px 18px 5px;background-color:#000;height:auto;box-shadow:-10px 10px red;transform:scale(0.67,0.67) translate3D(12px,-12px,0) rotate3D(1.3,0.5,-1.1,45deg)">
            <div class="week character"
                style="position:absolute;right:60px;top:20px;width:auto;float:left;border:1px solid #000;height:auto;font-size:100%;padding: 8px 8px 8px 8px;transform:rotate(95deg) scale(1.5,1.5);margin:5px 5px 5px 5px;text-align:center;background-color:#000;">
                <div
                    style="transform:rotate(-70deg) scale(2,2);color: #fff;font:bold 3px A-OTF A1 Mincho Std,Yu Mincho;text-align:bottom">
                    <b><big><big id="weekno">一</big></big></b>
                </div>
            </div>
            <div class="&quot;full" style="position:relative;margin:5px 25px 10px 20px;width:100%">
                <div class="date" style="position:relative">
                    <div
                        style="position:relative;width:auto;float:left;border:1px solid #000;height:auto;font-size:100%;padding: 8px 8px 8px 8px;transform:rotate(15deg) scale(1.5,2);margin:5px 5px 5px 5px;text-align:center;background-color:#000;">
                        <div
                            style="transform:scale(2,2);color:#fff;font:bold 3px A-OTF A1 Mincho Std,Yu Mincho;text-align:bottom">
                            <b><big><big id="monno">5</big></big></b>
                        </div>
                    </div>
                    <div style="clear:both;"></div>
                    <div
                        style="position:relative;top:-5px;left:10px;width:auto;float:left;border:1px solid #000;height:auto;font-size:100%;padding: 8px 8px 8px 8px;transform:rotate(40deg) scale(1.5,3);margin:5px 5px 5px 5px;text-align:center;background-color:#000;">
                        <div
                            style="transform:scale(2,3.5);color:#fff;font:bold 8px A-OTF A1 Mincho Std,Yu Mincho;text-align:bottom">
                            <b><big><big>/</big></big></b>
                        </div>
                    </div>
                    <div
                        style="position:relative;top:18px;left:25px;width:auto;float:left;height:auto;font-size:100%;padding: 8px 8px 8px 8px;transform:rotate(-10deg) scale(2.5,2.5);margin:5px 5px 5px 5px;text-align:center;">
                        <div
                            style="transform:scale(2.5,2.5);color:#fff;font:bold 9px A-OTF A1 Mincho Std,Yu Mincho;text-align:bottom">
                            <b><big><big id="dayno">31</big></big></b>
                        </div>
                    </div>
                </div>
                <div class="state" style="position:relative;left:60px;top:26px;margin:0 25px 60px 15px">
                    <div
                        style="position:relative;width:auto;float:left;border:1px solid #000;height:auto;font-size:100%;padding: 8px 8px 8px 8px; transform:rotate(10deg) scale(1.5,1.5);margin:5px 5px 5px 5px;text-align:center;background-color:#000;">
                        <div style="transform:scale(2,2);text-align:bottom">
                            <style type="text/css">
                                @-moz-keyframes loading {

                                    0%,
                                    100% {
                                        -moz-transform: scale(1) rotateZ(0deg);
                                        transform: scale(1) rotateZ(0deg);
                                        opacity: 1;
                                    }

                                    26% {
                                        -moz-transform: scale(1.1) rotateZ(12deg);
                                        transform: scale(1.1) rotateZ(12deg);
                                        opacity: .2;
                                    }

                                    76% {
                                        -moz-transform: scale(0.8) rotateZ(-8deg);
                                        transform: scale(0.8) rotateZ(-8deg);
                                        opacity: .6;
                                    }
                                }

                                @-webkit-keyframes loading {

                                    0%,
                                    100% {
                                        -webkit-transform: scale(1) rotateZ(0deg);
                                        transform: scale(1) rotateZ(0deg);
                                        opacity: 1;
                                    }

                                    26% {
                                        -webkit-transform: scale(1.1) rotateZ(12deg);
                                        transform: scale(1.1) rotateZ(12deg);
                                        opacity: .2;
                                    }

                                    76% {
                                        -webkit-transform: scale(0.8) rotateZ(-8deg);
                                        transform: scale(0.8) rotateZ(-8deg);
                                        opacity: .6;
                                    }
                                }

                                @keyframes loading {

                                    0%,
                                    100% {
                                        -moz-transform: scale(1) rotateZ(0deg);
                                        -ms-transform: scale(1) rotateZ(0deg);
                                        -webkit-transform: scale(1) rotateZ(0deg);
                                        transform: scale(1) rotateZ(0deg);
                                        opacity: 1;
                                    }

                                    26% {
                                        -moz-transform: scale(1.1) rotateZ(12deg);
                                        -ms-transform: scale(1.1) rotateZ(12deg);
                                        -webkit-transform: scale(1.1) rotateZ(12deg);
                                        transform: scale(1.1) rotateZ(12deg);
                                        opacity: .2;
                                    }

                                    76% {
                                        -moz-transform: scale(0.8) rotateZ(-8deg);
                                        -ms-transform: scale(0.8) rotateZ(-8deg);
                                        -webkit-transform: scale(0.8) rotateZ(-8deg);
                                        transform: scale(0.8) rotateZ(-8deg);
                                        opacity: .6;
                                    }
                                }

                                .loader {
                                    overflow: hidden;
                                    font-size: 45px;
                                }

                                .loader span {
                                    -moz-animation: loading 1s linear infinite -0.8s;
                                    -webkit-animation: loading 1s linear infinite -0.8s;
                                    animation: loading 1s linear infinite -0.8s;
                                    display: inline-block;
                                }

                                .loader .span2 {
                                    -moz-animation: loading 1s linear infinite -0.2s;
                                    -webkit-animation: loading 1s linear infinite -0.2s;
                                    animation: loading 1s linear infinite -0.2s;
                                }

                                .loader .span3 {
                                    -moz-animation: loading 1s linear infinite -0.5s;
                                    -webkit-animation: loading 1s linear infinite -0.5s;
                                    animation: loading 1s linear infinite -0.5s;
                                }

                                .loader .span4 {
                                    -moz-animation: loading 1s linear infinite -1.1s;
                                    -webkit-animation: loading 1s linear infinite -1.1s;
                                    animation: loading 1s linear infinite -1.1s;
                                }

                                .loader .span5 {
                                    -moz-animation: loading 1s linear infinite -0.36s;
                                    -webkit-animation: loading 1s linear infinite -0.36s;
                                    animation: loading 1s linear infinite -0.36s;
                                }

                                .loader .span6 {
                                    -moz-animation: loading 1s linear infinite -0.65s;
                                    -webkit-animation: loading 1s linear infinite -0.65s;
                                    animation: loading 1s linear infinite -0.65s;
                                }

                                .loader .span7 {
                                    -moz-animation: loading 1s linear infinite -0.93s;
                                    -webkit-animation: loading 1s linear infinite -0.93s;
                                    animation: loading 1s linear infinite -0.93s;
                                }
                            </style>
                            <div class="loader" style="color:#fff;font-size:3px;overflow:visible;"><span
                                    class="span{{#time：N}};"><b id="word1">夜</b></span></div>
                        </div>
                    </div>
                    <div
                        style="position:relative;width:auto;float:left;border:1px solid #000;height:auto;font-size:100%;padding: 8px 8px 8px 8px; transform:rotate(-15deg) scale(1.5,1.5);margin:5px 5px 5px 5px;text-align:center;background-color:#000;">
                        <div style="transform:scale(2,2);text-align:bottom">
                            <div class="loader" style="color:#fff;font-size:3px;overflow:visible;"><span
                                    class="span{{#time：N}};"><b id="word2">晚</b></span></div>
                        </div>
                    </div>
                </div>
                <div style="clear:both;"></div>
                <div class="Monday" style="position:relative;top:30px;margin:0 0 10px 15px">
                    <div
                        style="position:relative;width:auto;float:left;border:1px solid #000;height:auto;font-size:100%;padding: 8px 8px 8px 8px;transform:rotate(15deg) scale(1.5,2);margin:5px 5px 5px 5px;text-align:center;background-color:#000;">
                        <div
                            style="transform:scale(1.8,1.8);color:#fff;font:bold 2px A-OTF A1 Mincho Std,Yu Mincho;text-align:bottom">
                            <b><big><big>P</big></big></b>
                        </div>
                    </div>
                    <div
                        style="position:relative;left:-5px;width:auto;float:left;border:1px solid #000;height:auto;font-size:100%;padding: 8px 8px 8px 8px;transform:rotate(-10deg) scale(1,1.5);margin:5px 5px 5px 5px;text-align:center;background-color:#000;">
                        <div
                            style="transform:scale(1.8,1.8);color:#fff;font:bold 5px A-OTF A1 Mincho Std,Yu Mincho;text-align:bottom">
                            <b><big><big>a</big></big></b>
                        </div>
                    </div>
                    <div
                        style="position:relative;left:-15px;width:auto;float:left;border:1px solid #000;height:auto;font-size:100%;padding: 8px 8px 8px 8px;transform:rotate(15deg) scale(1,1.5);margin:5px 5px 5px 5px;text-align:center;background-color:#000;">
                        <div
                            style="transform:scale(1.8,1.8);color:#fff;font:bold 3px A-OTF A1 Mincho Std,Yu Mincho;text-align:bottom">
                            <b><big><big>Y</big></big></b>
                        </div>
                    </div>
                    <div
                        style="position:relative;left:-20px;width:auto;float:left;border:1px solid #000;height:auto;font-size:100%;padding: 8px 8px 8px 8px;transform:rotate(15deg) scale(1.5,2);margin:5px 5px 5px 5px;text-align:center;background-color:#000;">
                        <div
                            style="transform:scale(1.8,1.8);color:#fff;font:bold 4px A-OTF A1 Mincho Std,Yu Mincho;text-align:bottom">
                            <b><big><big>D</big></big></b>
                        </div>
                    </div>
                    <div
                        style="position:relative;left:-25px;width:auto;float:left;border:1px solid #000;height:auto;font-size:100%;padding: 8px 8px 8px 8px;transform:rotate(-20deg) scale(1,1.5);margin:5px 5px 5px 5px;text-align:center;background-color:#000;">
                        <div
                            style="transform:scale(1.8,1.8);color:#fff;font:bold 4px A-OTF A1 Mincho Std,Yu Mincho;text-align:bottom">
                            <b><big><big>a</big></big></b>
                        </div>
                    </div>
                    <div
                        style="position:relative;left:-30px;width:auto;float:left;border:1px solid #000;height:auto;font-size:100%;padding: 8px 8px 8px 8px;transform:rotate(-15deg) scale(1.5,2);margin:5px 5px 5px 5px;text-align:center;background-color:#000;">
                        <div
                            style="transform:scale(1.8,1.8);color:#fff;font:bold 4px A-OTF A1 Mincho Std,Yu Mincho;text-align:bottom">
                            <b><big><big>Y</big></big></b>
                        </div>
                    </div>
                </div>
            </div><br><br><br>
        </div>
    </div>
    <script type="text/javascript">
        let time = new Date();
        let week = document.querySelector('#weekno');
        let month = document.querySelector('#monno');
        let day = document.querySelector('#dayno');
        let w1 = document.querySelector('#word1');
        let w2 = document.querySelector('#word2');

        month.innerText = time.getMonth() + 1;
        day.innerText = time.getDate();
        
        d = time.getDay();
        switch (d) {
            case 0:
                week.textContent = '日';
                break;
            case 1:
                week.textContent = '月';
                break;
            case 2:
                week.textContent = '火';
                break;
            case 3:
                week.textContent = '水';
                break;
            case 4:
                week.textContent = '木';
                break;
            case 5:
                week.textContent = '金';
                break;
            case 6:
                week.textContent = '土';
                break;
        }

        let h = time.getHours();
        if (h < 8) {
            w1.textContent = '朝';
            w2.textContent = '';
        } else if (h < 12) {
            w1.textContent = '午';
            w2.textContent = '前';
        } else if (h < 13) {
            w1.textContent = '午';
            w2.textContent = '間';
        }
        else if (h < 17) {
            w1.textContent = '午';
            w2.textContent = '後';
        }
        else if (h < 19) {
            w1.textContent = '夕';
            w2.textContent = '方';
        }
        else {
            w1.textContent = '夜';
            w2.textContent = '';
        }

        if ((d == 0 || d == 6) && (h > 7 && h < 17)) {
            w1.textContent = '昼';
            w2.textContent = '間';
        }
    </script>
    
	
    <ul class="social-links">
    	
        <li><a href="https://github.com/legr4ndk" target="_blank" title="Github" data-toggle=tooltip data-placement=top><i class="icon icon-github"></i></a></li>
        
        <li><a href="https://weibo.com/7526194755/profile" target="_blank" title="Weibo" data-toggle=tooltip data-placement=top><i class="icon icon-weibo"></i></a></li>
        
        <li><a href="https://twitter.com/legr4ndk" target="_blank" title="Twitter" data-toggle=tooltip data-placement=top><i class="icon icon-twitter"></i></a></li>
        
        <li><a href="https://legr4ndk.github.io/atom.xml" target="_blank" title="Rss" data-toggle=tooltip data-placement=top><i class="icon icon-rss"></i></a></li>
        
    </ul>


        <div class="copyright">
            <div class="support">
                <a target="_blank" rel="noopener" href="https://creativecommons.org"><img src="http://www.legr4ndk.top/img/cc.png"
                        alt="CreativeCommons" /></a>
                <a target="_blank" rel="noopener" href="https://996.icu"><img src="http://www.legr4ndk.top/img/link-996.icu-red.svg"
                        alt="996.icu" /></a>
                <br />
            </div>

            
                &copy; 2019-2022 By <a href="http://www.legr4ndk.top">
                        Legrandk
                    </a>
                    

                        <div class="publishby">
                            Theme based on <a href="https://github.com/cofess/hexo-theme-pure"
                                    target="_blank">pure</a>.
                        </div>
                        <div class="ICP">
                            <a href="http://beian.miit.gov.cn/" rel="external nofollow noopener noreferrer"
                                target="_blank">浙ICP备20009661号-2</a>
                        </div>
        </div>
</footer>
  <script src="//cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<script>
window.jQuery || document.write('<script src="js/jquery.min.js"><\/script>')
</script>

<script src="/js/plugin.min.js"></script>


<script src="/js/application.js"></script>


    <script>
(function (window) {
    var INSIGHT_CONFIG = {
        TRANSLATION: {
            POSTS: '文章',
            PAGES: '页面',
            CATEGORIES: '分类',
            TAGS: '标签',
            UNTITLED: '(未命名)',
        },
        ROOT_URL: '/',
        CONTENT_URL: '/content.json',
    };
    window.INSIGHT_CONFIG = INSIGHT_CONFIG;
})(window);
</script>

<script src="/js/insight.js"></script>






   
<script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>





   


  <script src="//cdn.jsdelivr.net/npm/@fancyapps/fancybox@3.3.5/dist/jquery.fancybox.min.js"></script>
  <script>
  //利用 FancyBox 实现点击图片放大
  $(document).ready(function() {
    $('article img').not('[hidden]').not('.panel-body img').each(function() {
      var $image = $(this);
      var imageCaption = $image.attr('alt');
      var $imageWrapLink = $image.parent('a');
      if ($imageWrapLink.length < 1) {
        var src = this.getAttribute('src');
        var idx = src.lastIndexOf('?');
        if (idx != -1) {
          src = src.substring(0, idx);
        }
        $imageWrapLink = $image.wrap('<a href="' + src + '"></a>').parent('a');
      }
      $imageWrapLink.attr('data-fancybox', 'images');
      if (imageCaption) {
        $imageWrapLink.attr('data-caption', imageCaption);
      }
    });
    $().fancybox({
      selector: '[data-fancybox="images"]',
      hash: false,
      loop: false,
    });
  });
  </script>





</body>
</html>